<template>
  <div id="user_space" class="user_space">

    <div class="userInfo">
      <el-form ref="userInfo"   label-width="80px" >
        <div class="name">
          <el-form-item label="昵称">
            <el-input v-model="userInfo.nickName"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名">
            <el-input v-model="userInfo.realName"></el-input>
          </el-form-item>
        </div>
        <div class="qq">
          <el-form-item label="qq">
            <el-input v-model="userInfo.qq"></el-input>
          </el-form-item>
          <el-form-item label="wechat">
            <el-input v-model="userInfo.wechat"></el-input>
          </el-form-item>
        </div>
        <div class="email">
          <el-form-item label="email">
            <el-input v-model="userInfo.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="userInfo.phone" disabled="disabled"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="工作" class="work">
          <el-input v-model="userInfo.work"></el-input>
        </el-form-item>
        <el-form-item label="地址" class="address">
          <el-input v-model="userInfo.address"></el-input>
        </el-form-item>
        <el-form-item label="爱好">
          <el-input  v-model="userInfo.hobby" placeholder="请使用英文逗号隔开"></el-input>
        </el-form-item>
        <el-form-item label="个性签名">
          <el-input type="textarea" v-model="userInfo.sign"></el-input>
        </el-form-item>
        <el-form-item
            label="头像："
            ref="uploadElement"
            prop="headUrl"
            class="uploadHead"
        >
          <el-input v-model="userInfo.head" v-if="false"></el-input>
          <el-upload
              class="avatar-uploader"
              ref="upload"
              list-type="picture-card"
              :on-change="handleChange"
              action="/upload"
              :before-upload="beforeUpload"
              :auto-upload="false"
              :data="userInfo"
              :limit="1"
              :show-file-list="true"
          >

            <img v-if="addPic" :src="headSrc" class="head">
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateUserInfo">修改</el-button>
          <el-button>取消</el-button>
        </el-form-item>
    </el-form>
    </div>

    <div class="logout">
      <el-button type="danger" @click="logout">退出登录</el-button>
    </div>

  </div>
</template>

<script>
import { getUserInfo ,updateUserInfo} from '@/utils/space'

  export default {
    name: 'UserSpace',
    data(){
      return{
        formData: new FormData(),
        addPic: true,
        headSrc:'',



        uid:JSON.parse(localStorage.getItem('user')).qaqUser.uid,
        userInfo:{
          uid:this.uid,
          nickName:'',
          realName:'',
          head:'',
          qq:'',
          wechat:'',
          email:'',
          phone:'',
          work:'',
          address:'',
          hobby:'',
          sign:'',
        },

        head:'',
      }
    },
    methods: {

      logout() {
        localStorage.removeItem('user')
        this.$router.go()
      },
      //获取用户信息
      async getUserInfo() {
        let { data: { data } } = await getUserInfo(this.uid)
        this.userInfo = data.userInfo
        this.headSrc=this.$host+data.userInfo.head
      },


      // 这是创建群聊ele组件的函数
      beforeUpload(file) {
        const isLt5M = file.size / 1024 / 1024 < 5;
        if (!isLt5M) {
          this.isLt2M = false
          return false;
        }
        this.formData.append("headImg", file)
        return false;
      },
      handleChange(file) {
        this.headSrc=file.url
      },
      //移除图片后的回调
      // handleRemove() {
      //   //等一秒动画
      //   this.userInfo.head=this.head
      //   setTimeout(() => { this.addPic = true }, 1100)
      // },

      //修改用户信息
      async updateUserInfo() {
        //手动触发ele组件的upload
        this.$refs.upload.submit();
        this.formData.append("uid",this.uid)
        this.formData.append("nickName", this.userInfo.nickName)
        this.formData.append("realName", this.userInfo.realName)
        this.formData.append("qq", this.userInfo.qq)
        this.formData.append("wechat", this.userInfo.wechat)
        this.formData.append("email", this.userInfo.email)
        this.formData.append("work", this.userInfo.work)
        this.formData.append("address", this.userInfo.address)
        this.formData.append("hobby", this.userInfo.hobby)
        this.formData.append("sign", this.userInfo.sign)
          await updateUserInfo(this.formData).then(response =>{
            if (response.data.code){
              this.$message.success(response.data.data)
            }
          }).catch(() => {
            this.$message.error('修改失败！请检查信息是否完全');
          })
        //重新获取用户信息
        await getUserInfo(this.uid).then(response=>{
          localStorage.setItem('user', JSON.stringify(response.data.data))
        })
      },
    },


    created() {
      this.getUserInfo()
    },
  }


</script>

<style scoped>
.user_space{
  display: flex;
  justify-content: space-between;
}

.el-form .el-form-item>>> .el-form-item__label{
  color: white;
}
.el-form .el-form-item>>> .el-input__inner{
  background-color: #303339;
  color: white;
}
.el-form .el-form-item>>> .el-textarea__inner{
  background-color: #303339;
  color: white;
}
.userInfo{

  margin-top: 40px;
  display: flex;
  width: 50%;
}
.name ,.qq ,.email{
  display: flex;
}
 .work{
  width: 100%;
}
.head{
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  border: 1px dashed #c0ccda;
  border-radius: 4px;
  line-height: 148px;
  text-align: center;
}

</style>